<template>
  <div class="container">
    <span class="admin" @click="goAdmin">进入管理后台</span>
    <div class="layout layout_left">
      <div class="layout_left_top">
        <div class="title">
          报警信息
          <div class="tab_list">
            <span class="checked">月</span>
            <span class="delimiter">/</span>
            <span>年</span>
          </div>
        </div>
        <div class="box_electric flex">
          <div class="flex_box">
            <div class="icon icon_a"></div>
            <div class="content content_electric">
              <div class="type_name">
                今日报警<span class="count count_color_a">1258</span>
              </div>
              <div class="per_progress">
                <el-progress :text-inside="true" :stroke-width="15" :percentage="70" />
              </div>
            </div>
          </div>
          <div class="flex_box">
            <div class="icon icon_b"></div>
            <div class="content content_electric">
              <div class="type_name">
                待解决报警<span class="count count_color_b">3912</span>
              </div>
              <div class="per_progress">
                <el-progress :text-inside="true" :stroke-width="15" :percentage="40" />
              </div>
            </div>
          </div>
          <div class="flex_box">
            <div class="icon icon_c"></div>
            <div class="content content_electric">
              <div class="type_name">
                本周报警<span class="count count_color_c">12581</span>
              </div>
              <div class="per_progress">
                <el-progress :text-inside="true" :stroke-width="15" :percentage="55" />
              </div>
            </div>
          </div>
          <div class="flex_box">
            <div class="icon icon_d"></div>
            <div class="content content_electric">
              <div class="type_name">
                本月报警<span class="count count_color_d">39000</span>
              </div>
              <div class="per_progress">
                <el-progress :text-inside="true" :stroke-width="15" :percentage="40" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layout_left_main flex">
        <div class="left_main_a">
          <div class="title">入廊管线</div>
          <div class="box_product flex">
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="80" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">建设长度</div>
            </div>
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="50" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">456</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">运营长度</div>
            </div>
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="50" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">8</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">管线种类</div>
            </div>
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="55" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">规划长度</div>
            </div>
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="20" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">运营人数</div>
            </div>
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="16" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">管线长度</div>
            </div>
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="30" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">视频监控</div>
            </div>
            <div class="flex_pro_box">
              <div class="flex_pro_data">
                <el-progress type="circle" :percentage="50" :width="120">
                  <template #default="{ percentage }">
                    <span class="percentage-value">{{ percentage }}</span>
                  </template>
                </el-progress>
              </div>
              <div class="flex_pro_title">门禁控制</div>
            </div>
          </div>
        </div>
        <div class="left_main_b">
          <div class="title">应急信息</div>
          <div class="box_env flex">
            <div class="flex_env_box">
              <div class="flex_env_title">目前超标次数</div>
              <div class="flex_env_content test"></div>
            </div>
            <div class="flex_env_box">
              <div class="flex_env_title">设备故障信息</div>
              <div class="flex_env_content flex">
                <div class="flex_env_content_title">
                  <p>目前故障占比</p>
                  <p>25%</p>
                </div>
                <el-progress type="circle" :percentage="75" :width="160" :stroke-width="18" class="inverse_circle">
                  <template #default="{ percentage }">
                    <span class="percentage-value">450</span>
                    <span class="percentage-label">设备总量</span>
                  </template>
                </el-progress>
              </div>
            </div>
            <div class="flex_env_box">
              <div class="flex_env_title">应急物资</div>
              <div class="flex_env_content" style="padding: 20px 0 0">
                <div class="pie_box">
                  <v-chart class="chart" :option="option" :autoresize="true" ref="myChart" />
                </div>
              </div>
            </div>
            <div class="flex_env_box">
              <div class="flex_env_title">监测信息</div>
              <div class="flex_env_content" style="padding: 30px 0 0">
                <div class="pie_box_out">
                  <v-chart class="chart" :option="option1" :autoresize="true" ref="myChart" />
                  <div class="pie_box_in"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="flex_blow_title">安防监控</div>
            <div class="flex_blow_content" style="margin-top: 40px">
              <div class="pie_box_2" style="width: 720px; height: 500px">
                <v-chart class="chart" :option="option2" :autoresize="true" ref="myChart" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layout layout_right">
      <div class="layout_right_top">
        <div class="right_top_box">
          <div class="title title_1">设备故障信息管理</div>
          <div class="right_top_content">
            <el-table :data="tableData" header-align="center" style="width: 100%; --el-table-border-color: none">
              <el-table-column prop="faultId" align="center" label="故障ID" />
              <el-table-column prop="faultType" align="center" label="故障类型" />
              <el-table-column prop="faultDescription" align="center" label="故障描述" />
              <el-table-column prop="fixPersonId" align="center" label="维修人员" />
              <el-table-column prop="fixTime" align="center" label="维修时间" />
            </el-table>
          </div>
        </div>
        <div class="right_top_box">
          <div class="title title_2">
            保养维修管理
            <div class="tab_list">
              <span class="checked">待办</span>
              <span class="delimiter">/</span>
              <span>已办</span>
            </div>
          </div>
          <div class="right_top_content">
            <el-table :data="tableData1" header-align="center" style="width: 100%; --el-table-border-color: none">
              <el-table-column prop="maintainId" align="center" label="保养计划ID" />
              <el-table-column prop="maintainName" align="center" label="保养计划名称" />
              <el-table-column prop="facilityName" align="center" label="设备名称" />
              <el-table-column prop="status" align="center" label="工单状态" />
              <el-table-column prop="maintainDur" align="center" label="保养时长" />
              <el-table-column prop="principal" align="center" label="负责人" />
            </el-table>
          </div>
        </div>
      </div>
      <div class="layout_right_middle">
        <div class="right_middle_box">
          <div class="title">管廊管理</div>
          <div class="right_middle_content flex">
            <div class="left">
              <div class="system_label">
                <span>防火分区</span>
                <span>56</span>
              </div>
              <div class="system_label">
                <span>设备信息</span>
                <span>4556</span>
              </div>
            </div>
            <div class="right flex">
              <div class="circle circle_1">
                <p>560</p>
                <p>防火分区管线</p>
              </div>

              <div class="circle circle_2">
                <p>15</p>
                <p>出入口</p>
              </div>
              <div class="circle circle_3">
                <p>88</p>
                <p>路段信息</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layout_right_bottom">
        <div class="right_bottom_box">
          <div class="title">环境监视控制</div>
          <div class="right_middle_content flex">
            <div class="volume_box">
              <div class="volume_title">热用户客管线图</div>
              <div class="volume_chart volume_chart_1"></div>
            </div>
            <div class="volume_box">
              <div class="volume_title">环境设备总览</div>
              <div class="volume_chart volume_chart_2" style="width: 600px; height: 400px">
                <v-chart class="chart" :option="option4" :autoresize="true" ref="myChart" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 0px; height: 0px">
      <!-- template里面写，记得宽高设置为0 -->
      <svg width="100%" height="100%">
        <defs>
          <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color: rgba(11, 66, 115, 0.3)" stop-opacity="0.3"></stop>
            <stop offset="100%" style="stop-color: rgba(0, 234, 255, 0.7)" stop-opacity="1"></stop>
          </linearGradient>
        </defs>
      </svg>
      <svg width="100%" height="100%">
        <defs>
          <linearGradient id="write1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color: rgba(0, 189, 255, 1)" stop-opacity="0.8"></stop>
            <stop offset="100%" style="stop-color: rgba(0, 244, 255, 1)" stop-opacity="1"></stop>
          </linearGradient>
        </defs>
      </svg>
    </div>
  </div>
</template>
<script setup>
import { graphic } from 'echarts'

import { onMounted } from 'vue'

const router = useRouter()

function goAdmin()
{
  router.push({ path: '/index' })
}

onMounted(() =>
{
  const myChart = ref(null)
})
const data = [
  {
    name: '管子',
    value: 5,
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#213eff' },
          { offset: 1, color: '#008eff' }
        ],
        global: false
      }
    }
  },
  {
    name: '水泥袋',
    value: 2.7,
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#fcff1b' },
          { offset: 1, color: '#ff9b00' }
        ],
        global: false
      }
    }
  },
  {
    name: '沙袋',
    value: 2.3,
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#008eff' },
          { offset: 1, color: '#213eff' }
        ],
        global: false
      }
    }
  }
]

const data1 = [
  {
    name: '氧气',
    value: 5,
    itemStyle: {
      color: '#00ff89'
    }
  },
  {
    name: '甲烷',
    value: 2.7,
    itemStyle: {
      color: '#0097ff'
    }
  },
  {
    name: '氯化钠',
    value: 2.3,
    itemStyle: {
      color: '#dce9f5'
    }
  },
  {
    name: '天然气',
    value: 2.3,
    itemStyle: {
      color: '#00ffd5'
    }
  }
]

const option = {
  tooltip: {
    trigger: 'item', //数据项图形触发
    formatter: '{b}: {d}%' // 展示格式
  },
  legend: {
    icon: 'circle',
    itemWidth: 4,
    itemHeight: 4,
    top: '60%',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      type: 'pie', // 设置统计图类型
      selectedMode: false, // 一次只能选中一个模块
      radius: ['30%', '40%'], // 将0改成50%，修改圆的内径
      center: ['50%', '30%'],
      label: {
        position: 'outside', // 设置标签向外
        formatter: '{d}% \n{b}', // 设置标签格式
        color: '#fff'
      },
      labelLine: {
        show: true, //数据标签引导线
        length: 15,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      clockwise: false, // 逆时针开始排序
      data: data
    }
  ],
  graphic: {
    // 添加原生图形元素组件
    elements: [
      {
        type: 'text', // 组件类型
        left: 'center', //定位
        top: '23%', // 定位
        style: {
          // 样式
          text: '5150', //文字
          fontSize: 24, //文字大小
          textAlign: 'center', //定位
          width: 30,
          height: 30,
          fill: '#fff' // 字体颜色
        }
      },
      {
        type: 'text',
        left: 'center',
        top: '35%',
        style: {
          text: '应急物资',
          fontSize: 12,
          textAlign: 'center',
          width: 30,
          height: 25,
          fill: '#d4d5d6'
        }
      }
    ]
  }
}

const option1 = {
  tooltip: {
    trigger: 'item', //数据项图形触发
    formatter: '{b}: {d}%' // 展示格式
  },
  legend: {
    icon: 'diamond',
    orient: 'vertical',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 20,
    top: '10%',
    right: '0%',
    textStyle: {
      fontSize: 14,
      color: '#fff'
    }
  },
  grid: {
    // show: true,
    top: '0%',
    left: '0%',

    containLabel: true
  },
  series: [
    {
      type: 'pie', // 设置统计图类型
      selectedMode: 'single', // 一次只能选中一个模块
      radius: ['40%', '45%'], // 将0改成50%，修改圆的内径
      center: ['50%', '30%'],
      selectedOffset: 5,
      label: {
        show: false,
        position: 'outside', // 设置标签向外
        formatter: '{d}% \n{b}', // 设置标签格式
        color: '#fff'
      },
      labelLine: {
        show: false, //数据标签引导线
        length: 100,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      clockwise: true, // 逆时针开始排序
      data: data1
    }
  ],
  graphic: {
    // 添加原生图形元素组件
    elements: [
      {
        type: 'text', // 组件类型
        left: 'center', //定位
        top: '22%', // 定位
        style: {
          // 样式
          text: '5616', //文字
          fontSize: 30, //文字大小
          textAlign: 'center', //定位
          width: 30,
          height: 30,
          fill: '#fff' // 字体颜色
        }
      },
      {
        type: 'text',
        left: 'center',
        top: '35%',
        style: {
          text: '总量',
          fontSize: 14,
          textAlign: 'center',
          width: 30,
          height: 25,
          fill: '#d4d5d6'
        }
      }
    ]
  }
}

const option2 = {
  //x轴
  xAxis: {
    type: 'category', //坐标轴类型
    //type: 'value' 数值轴，适用于连续数据。
    //type: 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，
    // 或者可通过 xAxis.data 设置类目数据。,category与data一起使用
    axisLabel: {
      fontSize: 14,
      color: '#fff' //坐标值得具体的颜色
    },
    data: [
      '一区',
      '二区',
      '三区',
      '四区',
      '五区',
      '六区',
      '七区',
      '八区',
      '九区',
      '十区'
    ]
  },
  // y轴
  yAxis: {
    type: 'value',
    splitLine: {
      //刻度线
      show: false
    },
    axisLabel: {
      fontSize: 14,
      color: '#fff', //坐标值得具体的颜色
      show: false
    }
  },
  // 直角坐标系内绘图网格
  grid: {
    left: 0,
    containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
  },
  // 图例组件
  legend: {
    bottom: '5%'
  },
  // 提示框组件。
  tooltip: {},
  series: [
    {
      type: 'bar', //柱状图
      barWidth: '20', //柱条的宽度，不设时自适应。
      data: [
        120, 200, 150, 80, 70, 110, 130, 36, 57, 44
      ],
      backgroundStyle: {
        //是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
        color: 'none'
      },
      label: {
        show: true, //开启显示
        position: 'top', //在上方显示

        //数值样式
        color: '#fff',
        fontSize: 16
      },
      itemStyle: {
        //图形样式。
        color: {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#00FFFF'
            },
            {
              offset: 0.5,
              color: '#00FFFF'
            },
            {
              offset: 0.5,
              color: '#11A6D0'
            },
            {
              offset: 1,
              color: '#11A6D0'
            },
            {
              offset: 0,
              color: '#83bac9'
            },
            {
              offset: 0,
              color: 'rgba(17,166,208,0.3)'
            }
          ]
        }
      }
    },
    {
      z: 2, //控制图形的前后顺序
      symbolPosition: 'start',
      type: 'pictorialBar', //象形柱图是可以设置各种具象图形元素
      data: [
        120, 200, 150, 80, 70, 110, 130, 36, 57, 44
      ],
      symbol: 'diamond',
      symbolOffset: [0, '50%'],
      symbolSize: [20, 10],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#00FFFF'
            },
            {
              offset: 0.5,
              color: '#00FFFF'
            },
            {
              offset: 0.5,
              color: '#11A6D0'
            },
            {
              offset: 1,
              color: '#11A6D0'
            },
            {
              offset: 0,
              color: '#83bac9'
            },
            {
              offset: 0,
              color: 'rgba(17,166,208,0.3)'
            }
          ]
        }
      }
    },
    {
      z: 3, //控制图形的前后顺序
      type: 'pictorialBar',
      symbolPosition: 'end',
      data: [
        120, 200, 150, 80, 70, 110, 130, 36, 57, 44
      ],
      symbol: 'diamond',
      symbolOffset: [0, '-50%'],
      symbolSize: [20, 20 * 0.25],
      itemStyle: {
        color: '#00FFFF'
      }
    }
  ]
}

const tableData = [
  {
    faultId: 'No.1341',
    faultType: '初期故障',
    faultDescription: '二氧化碳变化率报警报警',
    fixPersonId: '王三',
    fixTime: '2022-11-23 15:53'
  },
  {
    faultId: 'No.1341',
    faultType: '初期故障',
    faultDescription: '二氧化碳变化率报警报警',
    fixPersonId: '王三',
    fixTime: '2022-11-23 15:53'
  },
  {
    faultId: 'No.1341',
    faultType: '初期故障',
    faultDescription: '二氧化碳变化率报警报警',
    fixPersonId: '王三',
    fixTime: '2022-11-23 15:53'
  },
  {
    faultId: 'No.1341',
    faultType: '初期故障',
    faultDescription: '二氧化碳变化率报警报警',
    fixPersonId: '王三',
    fixTime: '2022-11-23 15:53'
  },
  {
    faultId: 'No.1341',
    faultType: '初期故障',
    faultDescription: '二氧化碳变化率报警报警',
    fixPersonId: '王三',
    fixTime: '2022-11-23 15:53'
  }
]

const tableData1 = [
  {
    maintainId: 'No.1342',
    maintainName: '2019年热力管线检测设备测试',
    facilityName: '热力管线',
    status: '保养中',
    maintainDur: '01:15',
    principal: '王三'
  },
  {
    maintainId: 'No.1342',
    maintainName: '2019年热力管线检测设备测试',
    facilityName: '热力管线',
    status: '保养中',
    maintainDur: '01:15',
    principal: '王三'
  },
  {
    maintainId: 'No.1342',
    maintainName: '2019年热力管线检测设备测试',
    facilityName: '热力管线',
    status: '保养中',
    maintainDur: '01:15',
    principal: '王三'
  },
  {
    maintainId: 'No.1342',
    maintainName: '2019年热力管线检测设备测试',
    facilityName: '热力管线',
    status: '保养中',
    maintainDur: '01:15',
    principal: '王三'
  },
  {
    maintainId: 'No.1342',
    maintainName: '2019年热力管线检测设备测试',
    facilityName: '热力管线',
    status: '保养中',
    maintainDur: '01:15',
    principal: '王三'
  }
]

let data_round = 90
var assistdata = []
for (let i = 0; i < 10; i++)
{
  //这里可以通过更改数值进行设置格子宽度，数值越小格子越宽
  assistdata.push({
    name: i,
    value: 5,
    itemStyle: {
      color: i / 2 == 0 ? 'transparent' : '#000'
    }
  })
}
const option3 = {
  legend: {
    orient: 'vertical',
    x: 'left',
    show: false
  },
  tooltip: {
    trigger: 'item',
    formatter: '{d}%',
    show: false
  },
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: '62px',
      z: 2,
      zlevel: 100,
      style: {
        text: '在线率',
        fill: '#6AC5FC',
        font: 'bold 14px Microsoft YaHei',
        fontSize: 14
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '52px',
      z: 2,
      zlevel: 100,
      style: {
        text: data_round + '%',
        fill: '#6AC5FC',
        fontWeight: 700,
        fontSize: 14
      }
    }
  ],
  series: [
    {
      name: '在线率',
      type: 'pie',
      silent: true,
      radius: ['70%', '80%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      hoverAnimation: false,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        show: false,
        borderColor: '#0C202B',
        borderWidth: 4
      },
      data: assistdata
    }
  ]
}

const option4 = {
  legend: {
    show: false
  },
  grid: {
    top: '5%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    borderColor: 'rgba(53,126,226,0.5)', // 提示框浮层的边框颜色。
    borderWidth: 1, // 提示框浮层的边框宽。
    padding: 10, // 提示框浮层内边距，
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
  },
  xAxis: {
    type: 'category',
    axisTick: false,
    axisLabel: {
      color: '#fff'
    },
    axisLine: {
      show: true, // 是否显示坐标轴轴线
      lineStyle: {
        color: 'rgba(24,52,73,1)', // 坐标轴线线的颜色
        width: '1'
      }
    },
    data: [
      '1日',
      '2日',
      '3日',
      '4日',
      '5日',
      '6日',
      '7日',
      '8日',
      '9日',
      '10日'
    ]
  },
  yAxis: {
    type: 'value',
    splitNumber: 5,
    axisLabel: {
      color: '#fff'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        width: 1,
        color: 'rgba(32,108,176,0.3)'
      }
    }
  },
  series: [
    {
      name: '分机',
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(32,108,176,0.8)' },
            { offset: 1, color: 'rgba(32,108,176,0.1)' }
          ],
          global: false
        }
      },
      data: [11, 21, 24, 25, 30, 15, 10, 22, 58, 75]
    },
    {
      name: '排水',
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(0,193,177,0.8)' },
            { offset: 1, color: 'rgba(0,193,177,0.1)' }
          ],
          global: false
        }
      },
      data: [10, 20, 22, 35, 40, 45, 50, 12, 55, 5]
    },
    {
      name: '照明',
      type: 'line',
      color: 'rgba(255, 169, 0, 0.5)',
      data: [2, 20, 22, 35, 40, 45, 50, 12, 55, 5]
    }
  ]
}
</script>
<style lang="scss" scoped>
$screen_width: 1980px;
$screen_height: 1080px;

.container {
  width: $screen_width * 3;
  height: $screen_height * 2;
  background: url(@/assets/images/screen-bg.png) center center no-repeat;
  padding: 400px 50px;
  color: #fff;
  position: relative;

  .test {
    margin-top: 20px;
    width: 270px;
    height: 150px;
    background: url(@/assets/images/digit.png) center center no-repeat;
  }

  .admin {
    position: absolute;
    bottom: 0;
    left: 50%;
    font-size: 30px;
    width: 200px;
    height: 160px;
    line-height: 160px;
    margin-left: -80px;
    cursor: pointer;
  }

  .layout_left {
    width: 1140px;

    .layout_left_top {
      width: 1000px;

      .title {
        width: 1000px;
      }
    }
  }

  .layout_right {
    position: absolute;
    right: 30px;
    top: 400px;
    width: 1070px;
    height: 1500px;

    .layout_right_top {
      .right_top_box:first-child {
        width: 100%;
      }

      .right_top_box:last-child {
        width: 100%;

        .title {
          width: 920px;
        }

        .tab_list {
          right: -150px;
        }
      }

      .right_top_content {
        margin-top: 30px;
        margin-bottom: 30px;
        border: 1px solid rgba(0, 63, 122, 0.6);
      }
    }

    .layout_right_middle {
      .circle {
        width: 240px;
        height: 120px;
        transform: rotateX(30deg);
        margin-top: 60px;
        text-align: center;

        p {
          font-size: 50px;
          line-height: 1.5;
          font-weight: 600;
          margin: -20px 0 0;
        }
      }

      .circle_1 {
        margin-left: 10px;
        background: url(@/assets/images/a.png) center center no-repeat;
        background-size: 100% 100%;

        p:last-child {
          font-size: 18px;
          color: #00fdab;
          line-height: 3;
        }
      }

      .circle_2 {
        background: url(@/assets/images/b.png) center center no-repeat;
        background-size: 100% 100%;

        p:last-child {
          font-size: 18px;
          color: #ffeb3a;
          line-height: 3;
        }
      }

      .circle_3 {
        background: url(@/assets/images/c.png) center center no-repeat;
        background-size: 100% 100%;

        p:last-child {
          font-size: 18px;
          color: #ff4588;
          line-height: 3;
        }
      }

      .system_label {
        display: flex;
        height: 83px;
        width: 328px;
        padding: 20px 20px 23px;
        margin: 30px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url(@/assets/images/label-bg.png) center center no-repeat;

        span:first-child {
          color: #24efff;
          font-size: 20px;
          font-weight: 600;
        }

        span:last-child {
          color: rgb(229, 239, 252, 0.8);
          font-size: 32px;
          font-weight: 600;
          letter-spacing: 2px;
        }
      }
    }

    .layout_right_bottom {
      .right_middle_content {
        margin-top: 20px;
        justify-content: space-between;

        .volume_title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 20px;
          font-style: italic;
        }

        .volume_chart_1 {
          width: 400px;
          height: 330px;
          border: 1px solid #3eb3ff;
          border-radius: 8px;
          margin-top: 35px;
          background: url(@/assets/images/hot.png) center center no-repeat;
        }
      }
    }
  }
}

.flex {
  display: flex;
  flex-direction: row;
}

.title {
  height: 40px;
  padding-left: 50px;
  background: linear-gradient(90deg,
      rgba(39, 71, 119, 0.9),
      rgba(9, 40, 73, 0.3));
  font-size: 20px;
  font-weight: bolder;
  line-height: 2;
  position: relative;

  &::before {
    position: absolute;
    left: -30px;
    top: -6px;
    width: 52px;
    height: 52px;
    background: rgba(2, 11, 34, 0.95) url(@/assets/images/title-circle.png) center center no-repeat;
    border-radius: 40px;
    content: '';
  }

  &::after {
    position: absolute;
    right: 15px;
    top: 9px;
    width: 120px;
    height: 22px;
    background: url(@/assets/images/gradient-stripe.png) center center no-repeat;
    content: '';
  }

  .tab_list {
    color: #3c76b6;
    position: absolute;
    right: -100px;
    top: 0px;
    font-size: 24px;
    line-height: 40px;

    .delimiter {
      margin: 0px 10px;
    }

    .checked {
      color: #b2dcff;
    }
  }
}

.box_electric {
  width: 1140px;
  padding-bottom: 80px;
  margin-left: -30px;

  .flex_box {
    width: 25%;
    margin-top: 20px;
  }

  .icon {
    width: 120px;
    height: 130px;
    float: left;
    background-position: -15px 0px;
  }

  .content {
    padding-top: 45px;
    font-size: 20px;
    font-weight: 600;
    padding-left: 120px;

    .type_name {
      white-space: nowrap;
    }

    .per_progress {
      position: relative;
      height: 15px;
      margin-top: 15px;
      padding: 0 10px;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: #006dff;
        width: 5px;
        content: '';
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #006dff;
        width: 5px;
        content: '';
      }
    }

    .count {
      margin-left: 10px;
    }

    .count_color_a {
      color: #3398ff;
    }

    .count_color_b {
      color: #80abff;
    }

    .count_color_c {
      color: #61ffa8;
    }

    .count_color_d {
      color: #ebb744;
    }
  }

  .icon_a {
    background-image: url(@/assets/images/icon1.png);
  }

  .icon_b {
    background-image: url(@/assets/images/icon2.png);
  }

  .icon_c {
    background-image: url(@/assets/images/icon3.png);
  }

  .icon_d {
    background-image: url(@/assets/images/icon4.png);
  }
}

.layout_left_main {
  .left_main_a {
    width: 360px;

    .box_product {
      flex-wrap: wrap;

      .flex_pro_box {
        width: 50%;
        margin-top: 80px;
        padding: 0px;

        &:nth-of-type(odd) {
          padding-right: 20px;
        }

        &:nth-of-type(even) {
          padding-left: 20px;
        }

        .flex_pro_data {
          width: 160px;
          height: 160px;
          padding: 20px;
          background-image: url(@/assets/images/per-bg.png);

          .percentage-value {
            font-size: 40px;
            color: rgba(0, 234, 255, 0.8);
          }
        }

        .flex_pro_title {
          font-size: 20px;
          font-weight: 600;
          text-align: center;
          line-height: 3;
        }
      }
    }
  }

  .left_main_b {
    margin-left: 60px;
    width: 650px;

    .box_env {
      width: 650px;
      flex-wrap: wrap;

      .flex_env_box {
        width: 50%;
        flex-shrink: 0;
        color: #fff;

        .flex_env_title {
          font-size: 18px;
          line-height: 80px;
          font-weight: 600;
        }

        .flex_env_content {
          padding: 40px 0;

          .flex_env_content_title {
            padding-right: 20px;

            p {
              padding: 0;
              margin: 0;
              text-align: center;
            }

            p:first-child {
              font-size: 16px;
            }

            p:last-child {
              font-size: 30px;
              color: #ff0065;
              font-weight: 600;
              font-style: italic;
            }
          }
        }

        .pie_box {
          width: 350px;
          height: 300px;
          background: url(@/assets/images/shadow-circle.png) 50% 13% no-repeat;
          margin-left: -25px;
        }

        .pie_box_out {
          width: 400px;
          height: 300px;
          background: url(@/assets/images/x-circle.png) 50% 0% no-repeat;
          margin-left: -80px;
          position: relative;
        }

        .pie_box_in {
          position: absolute;
          width: 110px;
          height: 110px;
          border: 4px solid rgb(0, 95, 48, 0.7);
          border-radius: 60px;
          top: 50%;
          left: 50%;
          margin-left: -55px;
          margin-top: -115px;
        }

        .percentage-value {
          display: block;
          color: #fff;
          font-size: 40px;
        }

        .percentage-label {
          display: block;
          color: #fff;
          font-size: 16px;
          margin-top: 10px;
        }
      }
    }
  }

  .footer {
    margin-top: -30px;
    position: relative;
    z-index: 10;
  }

  .flex_blow_title {
    font-size: 18px;
    font-weight: 600;
  }

  .pie_box_2 {
    background: url(@/assets/images/x.png) 70% 81% no-repeat;
    background-size: 680px;
  }
}

:deep {
  .per_progress .el-progress-bar__inner {
    background: linear-gradient(-90deg,
        rgba(115, 178, 255, 1),
        rgba(9, 40, 73, 0.5));
    border-radius: 0px; // 双边圆角
  }

  .per_progress .el-progress-bar__outer {
    background: rgba(9, 40, 73, 0.7);
    border-radius: 0px; // 双边圆角
  }

  .per_progress .el-progress-bar__innerText {
    vertical-align: top;
    margin-top: 2px;
  }

  .flex_pro_data .el-progress-circle svg>path:nth-child(1) {
    stroke: rgba(11, 66, 115, 1);
  }

  .flex_pro_data .el-progress-circle svg>path:nth-child(2) {
    stroke: url(#write);
  }

  .flex_env_content .el-progress-circle svg>path:nth-child(2) {
    stroke: url(#write1);
    stroke-width: 4;
  }

  .flex_env_content .el-progress-circle {
    transform: rotateY(180deg);
  }

  .flex_env_content .el-progress-circle svg>path:nth-child(1) {
    stroke: rgba(33, 48, 76, 0.8);
  }

  .el-table th.is-leaf {
    // border: none;
    background: rgba(18, 67, 125, 0.3) !important;
    height: 40px !important;
    font-size: 16px;
    font-weight: 400;
    color: aliceblue;
    border: none !important;
  }

  .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    color: aliceblue;
    font-size: 14px;
    font-weight: 400;
  }

  .el-table {
    --el-table-tr-bg-color: transparent;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(33, 46, 62, 0.5) !important;
  }
}
</style>
